<template>
  <div>
    <search-box @search="loadData" @reset="clientName = ''">
      <div style="display: flex">
        <search-input search-text="Client">
          <a-input v-model:value="clientName" />
        </search-input>
        <search-input search-text="Status">
          <a-select
            ref="select"
            v-model:value="status"
            show-search
            option-filter-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
            option-label-prop="label"
          >
            <a-select-option :key="10" label="Pending">Pending</a-select-option>
            <a-select-option v-if="hasViewRejectedRecordPermission" :key="30" label="Rejected">
              Rejected
            </a-select-option>
          </a-select>
        </search-input>
      </div>
    </search-box>
    <a-spin :spinning="loading">
      <e-container style="margin-top: 24px">
        <a-table
          class="ant-table-striped"
          :columns="dynamicColumns"
          :data-source="listData"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
          row-key="id"
          table-layout="fixed"
          :pagination="null"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'tags'">
              <e-tags-field :client="record" />
            </template>
            <template v-if="column.key === 'countryID'">
              <e-country-or-region :code="record.countryID" />
            </template>
            <template v-if="column.key === 'status'">
              <e-client-status :status="record.status"></e-client-status>
            </template>
            <template v-if="column.key === 'fullName'">
              <a :href="router.resolve({ name: 'Client Detail', params: { id: record.id } }).href" :target="record.id">
                {{ record.fullName }}
              </a>
            </template>
            <template v-if="column.key === 'operate'">
              <a style="color: red" @click="handleDeleteRejectedRecord(record.id)">
                <a-space><e-icon type="delete" />Delete</a-space>
              </a>
            </template>
          </template>
          <template #emptyText><e-empty /></template>
        </a-table>
      </e-container>
    </a-spin>
  </div>
</template>

<script setup>
import { computed, ref, inject } from 'vue'
import { useStore } from 'vuex'
import { cloneDeep } from 'lodash-es'
import { useRouter } from 'vue-router'
import SearchBox from '@/pages/components/Search.vue'
import SearchInput from '@/pages/components/SearchInput.vue'
import EContainer from '@/components/EContainer.vue'
import Columns from './columns.js'
import TargetClient from '@/api/targetClient.js'
import { OPERATION_SUCCESSFUL, SURE_TO_DELETE } from '@/constants/message.js'
const { Modal, message } = inject('Feedback')
const router = useRouter()
const listData = ref([])
const loading = ref(false)
const clientName = ref('')
const status = ref(10)
const searchStatus = ref(10)
const dynamicColumns = computed(() => {
  const columns = cloneDeep(Columns)
  if (searchStatus.value === 10) {
    columns.pop()
  }
  return columns
})
const store = useStore()
// 销售总监和销售支持可以查询以拒绝的记录
const hasViewRejectedRecordPermission = computed(
  () => store.getters['user/isPrimaryCSO'] || store.getters['user/isSalesSupport']
)
const loadData = () => {
  loading.value = true
  TargetClient.listAdminPendingClient(clientName.value, status.value)
    .then(res => {
      searchStatus.value = status.value
      listData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}
const handleDeleteRejectedRecord = id => {
  Modal.confirm({
    content: SURE_TO_DELETE,
    okButtonProps: { danger: true },
    onOk: () => {
      TargetClient.deleteAdminRejectedClient(id).then(() => {
        message.success(OPERATION_SUCCESSFUL)
        loadData()
      })
    }
  })
}
loadData()
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
.search-item {
  .ant-input,
  .ant-select,
  :deep(.ant-picker) {
    width: 240px;
  }
}
</style>
<route lang="yaml">
name: New Clients
path: /pending-clients/new-clients
meta:
  icon: edit
  title: New Clients
  sort: 0
  roles: isBUM
</route>
